import React, { useState } from 'react';
import "./card_post.scss";

import { Rate, Card, Input, Empty } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

import { Menu } from 'antd';
const { SubMenu } = Menu;
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];

const Card_post = (props) => {
    //设置是否显示input控件
    const [inpFlag, setInpFlag] = useState(false);
    //设置input的value
    const [inpValue, setInpValue] = useState("");

    const [openKeys, setOpenKeys] = useState(['sub1']);

    //nav展开收起
    const onOpenChange = keys => {
        const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };

    const HtmlStr = props.navItemObj.id ? props.navItemObj.abilityStandard:"";

    return (
        <div id="card">
            <div className="cardLeft">
                <Card
                    onClick={() => setInpFlag(false)}
                    title={inpFlag ? <Input
                        value={inpValue}
                        onClick={(e) => e.stopPropagation()}
                        onChange={(e) => setInpValue(e.target.value)}
                        suffix={<SearchOutlined key="inpSearch" onClick={(e) => { props.setSearch(inpValue); e.stopPropagation(); }} />}
                        placeholder="Basic usage" /> : null}
                    extra={inpFlag ? null : <SearchOutlined
                        key="btnSearch"
                        onClick={(e) => { setInpFlag(true); e.stopPropagation(); }}
                        style={{ cursor: "pointer" }} />}
                    style={{ width: 300 }}>
                    <Menu
                        mode="inline"
                        openKeys={openKeys}
                        onOpenChange={onOpenChange}
                        selectedKeys={props.navId ? [props.navId] : [""]}
                        onClick={({ key }) => props.setNavId(key)}>
                        {
                            props.navList[0] && props.navList.map(item => {
                                if (item.children) {
                                    return <SubMenu key={item.id} title={item.label} onTitleClick={({key}) => props.setNavId(key)}>
                                        {
                                            item.children.map(item1 => {
                                                return <Menu.Item key={item1.id}>{item1.label}</Menu.Item>
                                            })
                                        }
                                    </SubMenu>
                                } else {
                                    return <Menu.Item key={item.id}>{item.label}</Menu.Item>
                                }
                            })
                        }
                    </Menu>
                    {
                        !props.navList[0] && <Empty description="暂无数据" />
                    }
                </Card>
            </div>
            <div className="cardRight">
                <div className="p1">
                    <span className="title">掌握要求</span>
                    <Rate count="3" disabled defaultValue={1} />
                    <span>一星到三星分别代表了解、掌握、精通3个级别</span>
                </div>
                <div className="p2">
                    <span className="title">能力标准</span>
                    <span className="p2Content">
                       {/* <h2>{ HtmlStr.split("!")[0] }</h2> */}
                       {
                        //    HtmlStr.split("-") && HtmlStr.split("-").map((item,index)=>{
                        //        return <li key={index}>{item}</li>
                        //    })
                       }
                       {
                        //    HtmlStr.match(/\(*+\)/)[1] && <img src={HtmlStr.match(/\(*+\)/)[1]} alt=""/>
                       }
                    </span>
                </div>
            </div>
        </div>
    );
};

export default Card_post;